<template>
  <div class="main-bg">
    <!-- <el-button type="primary" style="float: right;margin-top: 10px;"  @click="addUser">添加员工</el-button> -->

    <div class="container">
      <el-form ref="form" :model="queryParams" :inline="true" size="small">
      <el-form-item label="姓名:">
        <el-input v-model="queryParams.storeUserName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="手机号:">
        <el-input v-model="queryParams.storeUserPhone" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="门店:">
        <el-select v-model="queryParams.storeCoding" clearable placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.storeCode"
            :label="item.storeName"
            :value="item.storeCode">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类型:">
        <el-select v-model="queryParams.storeUserType" clearable placeholder="请选择">
          <el-option
            v-for="item in storeUserTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList()">搜索</el-button>
      </el-form-item>
    </el-form>
      <el-table
        :data="tableData"
        v-loading="loading"
        style="width: 100%"
      >

        <el-table-column
          prop="storeUserName"
          align="center"
          label="姓名">
        </el-table-column>
        <el-table-column
          prop="storeUserPhone"
          align="center"
          label="手机号">
        </el-table-column>
        <el-table-column
          prop="storeUserType"
          align="center"
          label="类型">
          <template slot-scope="scope">
            <span v-if="scope.row.storeUserType === 1901">店长</span>
            <span v-if="scope.row.storeUserType === 1902">店员</span>
            <span v-if="scope.row.storeUserType === 1903">超管</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="discountsPrice"
          align="center"
          label="本月订单金额">
          <template slot-scope="scope">
            {{scope.row.monthMap.totalDiscountsMoney}}元
          </template>
        </el-table-column>
        <el-table-column
          prop="totalAmount"
          align="center"
          label="总订单金额">
          <template slot-scope="scope">
            {{scope.row.totalMap.totalDiscountsMoney}}元
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          align="center"
          label="创建时间">
        </el-table-column>
        <!-- <el-table-column
          prop="merchantCoding"
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="changeUser(scope.row)">修改</el-button>
            <el-button type="primary" size="mini" @click="deleteUser(scope.row)">开除</el-button>
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="pageNum"
        style="float: right;margin-top: 20px;"
        :page-sizes="[10, 20, 50, 100]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog title="添加员工" :visible.sync="addUserFlag">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item label="员工姓名" prop="storeUserName" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.storeUserName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="storeUserPhone" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.storeUserPhone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="storeUserPwd" v-if="!ruleForm.storeUserId" :label-width="formLabelWidth">
          <el-input v-model="ruleForm.storeUserPwd"  autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('ruleForm')" :loading="loadingBtn">确定</el-button>
        <el-button @click="resetForm('ruleForm')">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import {getStoreUserPageList,deleteStoreUser,saveGeneralStoreUser,getStoreUserDetails,updateStoreUser,getStoreAll} from '@/api/store/store'
  export default {
    name: "index",
    data(){
      return{
        form:{},
        pageNum:1,
        total:0,
        tableData:[],
        loading:true,
        options:[],
        storeUserTypeList:[
          {
            value:1901,
            label:'店长'
          },
          {
            value:1902,
            label:'店员'
          },
          {
            value:1903,
            label:'超管'
          }
        ],
        queryParams:{
          // storeCoding:localStorage.getItem('storeCoding'),
          storeCoding:'',
          storeUserPhone:'',
          storeUserName:'',
          storeUserType:'',
        },
        ruleForm:{},
        formLabelWidth: '120px',
        rules: {
          storeUserName: [
            {required: true, message: '请输入员工姓名', trigger: 'blur'},
          ],
          storeUserPhone: [
            {required: true, message: '请输入员工手机号', trigger: 'blur'},
            {
              required: true,
              pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
              message: '请输入正确的手机号码',
              trigger: 'blur',
            },
          ],
          storeUserPwd: [
            {required: true, message: '请输入密码', trigger: 'blur'},
          ],
        },
        addUserFlag:false,
        loadingBtn:false,
      }
    },
    mounted(){
      this.getList()
      this.getStoreAllSelect()
    },
    methods:{
      // 获取门店列表
      getStoreAllSelect(){
        getStoreAll().then(res => {
          this.options = res.body.map(item => {
            item.storeCode = "ST_" + item.storeCode
            return item
          })
        })
      },
      // 添加员工
      addUser(){
        this.addUserFlag=true
        this.ruleForm={}
        this.$nextTick(() => {
          this.$refs.ruleForm.clearValidate();
        })

      },
      // 获取员工列表
      async getList(){
        let body={
          pageSize:10,
          pageNum:this.pageNum,
          table:{
            ...this.queryParams,
          }
        }

        let res = await getStoreUserPageList({body})
        this.tableData=res.body.list.map(item => {
          item.createTime = this.$utils.getCompleteDate(item.createTime, 'yyyy-MM-dd')
          return item
        })
        this.total=res.body.totalCount
        this.loading=false
      },
      // 提交店员信息
      submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          if (valid) {
            this.loadingBtn=true
            let body={
              storeCoding:localStorage.getItem('storeCoding'),
              ...this.ruleForm,
            }
            if(this.ruleForm.storeUserId){
              let res = await updateStoreUser({body})
              this.loadingBtn=false
              this.$message({
                type: 'success',
                message: '修改成功！'
              });

            }else{
              let res = await saveGeneralStoreUser({body})
              this.loadingBtn=false
              this.$message({
                type: 'success',
                message: '添加成功！'
              });
            }

            this.addUserFlag=false
            this.getList()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // 取消
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.addUserFlag=false
      },
      timestampToTime(timestamp) {
        var time = this.dayjs(timestamp).format("YYYY-MM-DD");
        // var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        // var Y = date.getFullYear() + '-';
        // var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        // var D = date.getDate() + ' ';
        return time;
      },
      handleCurrentChange(val){
        this.pageNum=val
        this.getList()
      },
      // 修改员工
      async changeUser(row){
        let body={
          storeCoding:localStorage.getItem('storeCoding'),
          "storeUserId": row.storeUserId
        }
        let res = await getStoreUserDetails({body})
        this.ruleForm=res.body
        this.addUserFlag=true
      },
      // 删除员工
      deleteUser(row){
        this.$confirm('此操作将永久开除该员工, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let body={
            storeCoding:localStorage.getItem('storeCoding'),
            "storeUserId": row.storeUserId
          }
          let res = await deleteStoreUser({body})
          this.$message({
            type: 'success',
            message: '开除成功！'
          });
          this.getList()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消开除'
          });
        });
      },
    },
  }
</script>

<style scoped>
  .titlebox{
    color:#20384D;
    font-size: 16px;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
  }
  .titlebar{
    width: 4px;
    height: 16px;
    background: #035EBA;
    border-radius: 0 2px 2px 0;
    margin-right: 10px;
  }
  .titleline{
    flex: 1;
    height: 2px;
    background: #E6E9EE;
    margin-left: 20px;
  }
  .upload-tips{
    color: #999999;
    line-height: 20px;
  }
</style>
